<template>
  <view class="page">

    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        运维统计
      </u-sticky>
    </view>
    <view class="content">
      <uni-data-picker v-model="regionId" class="dataPicker" clear-icon :localdata="dataTree"
        :map="{text: 'departName', value:'id'}" @change="onchange" @nodeclick="nodeClick" @popupclosed="popupclosed">
        <view class="dataPickerInput">
          <view>
            <image src="@/static/manage/address.png" class="address-icon"></image>
            {{areaName}}
          </view>
          <van-icon name="arrow" />
        </view>
      </uni-data-picker>
      <view class="statisticContent">
        <!-- @click="toItemDetail(item)" -->
        <view class="statisticItem statisticVillage" :style="{ 'background-image': `url(../../static/manage/villageBg1.png)`, 
            'margin-bottom': '10rpx'}">
          <!-- <image :src="`/static/manage/jiebojing1.png`"
              :style="{'width': item.style.width, 'height': item.style.height}" class="icon"></image> -->
          <view>
            <view class="label">村庄数量</view>
            <view class="main-value">{{formData.villageCount}}<span class="unit">个</span>
            </view>
          </view>
          <view>
            <view class="label">终端村</view>
            <view class="main-value">{{formData.terminalVillageCount}}<span class="unit">个</span>
            </view>
          </view>
          <view @click="nachangcunShow=true">
            <view style="color: rgba(39, 105, 247, 1)" class="label">纳场村</view>
            <view style="color: rgba(39, 105, 247, 1)" class="main-value">{{formData.nachangVillageCount}}<span
                class="unit">个</span>
            </view>
          </view>
        </view>
        <view v-for="(item, index) in contentList" :key="item.prop" class="statisticItem"
          :style="{ 'background-image': `url(../../static/manage/${item.picName}.png)`, 'margin-bottom': [0,1].includes(index) ? '10rpx' : '0'}"
          @click="toItemDetail(item)">
          <image :src="`/static/manage/${item.picName}1.png`"
            :style="{'width': item.style.width, 'height': item.style.height}" class="icon"></image>
          <view>
            <view class="label">{{item.label}}</view>
            <view class="main-value">{{ formData[item.prop]}}<span
                class="unit">{{item.picName !== 'process' ? '个' : 'h'}}</span></view>
          </view>
        </view>
      </view>
      <view class="statisticContent">
        <!-- :style="{ 'background-image': `url(../../static/manage/${item.picName}.png)`}" -->
        <view v-for="(item,index) in contentList1" :key="item.prop" class="statisticItem"
          :style="{ 'background-image': `url(../../static/manage/${item.picName}.png)`, 'margin-bottom': [0,1].includes(index) ? '10rpx' : '0'}"
          @click="toItemDetail(item)">
          <!-- <image :src="`/static/manage/${item.picName}.png`"
              :style="{'width': item.style.width, 'height': item.style.height}" class="icon"></image> -->
          <view style="margin-left: 107rpx">
            <view class="label">{{item.label}}</view>
            <view class="main-value">{{ formData1[item.prop]}}<span class="unit">个</span></view>
          </view>
        </view>
      </view>
      <view class="searchContent">
        <view class="searchVillage">
          <uni-search-bar v-model="searchVillage" bgColor="#ffffff" cancelButton="none" placeholder="按村庄名称搜索"
            @input="searchVillageChange" />
        </view>
        <view class="searchDate">
          <view class="dateContent">
            <!-- suffixIcon="calendar" suffixIconStyle="color: rgba(142, 142, 142, 1);font-size: 28rpx" -->
            <view @click="openCalendar('dateShow')">
              <u-input v-model="dateRange1" placeholder="请选择日期" disabled placeholderStyle="color:#989898"
                disabledColor="#fff">
                <span slot="suffix">
                  <!-- <image v-if="clearsDateShow" src="../../static/login/clear.png" class="clearImg"
                      @click.stop="onClearsDate('dateShow')"></image> -->
                  <image src="../../static/manage/calendarImg.png" class="calendarImg"></image>
                </span>
              </u-input>
            </view>
          </view>
        </view>
      </view>
      <view class="tableContent">
        <table stripe emptyText="暂无更多数据" class="tableClass">
          <!-- 表头行 -->
          <thead>
            <tr class="headTr" style="height: 42rpx;background: #fff;margin-bottom: 6rpx">
              <th align="center" style="width: 108rpx">村庄名称</th>
              <th align="center" style="width: 90rpx">累计报警</th>
              <th align="center" style="width: 90rpx">工单总数</th>
              <th align="center" style="width: 84rpx">已处理</th>
              <th align="center" style="width: 84rpx">未处理</th>
              <th align="center" style="width: 110rpx">超时未处理</th>
              <th align="center" style="width: 98rpx">运维企业</th>
            </tr>
          </thead>
          <!-- 表格数据行 -->
          <tbody class="tableBody">
            <tr v-for="(row,index) in OmtableList" :key="row.id" class="contentClass">
              <td align="center" class="type"
                :style="{'color': String(row.villageName).length > 5 ? '#3C8AFF': '#4a4a4a'}" style="width: 108rpx"
                @click="openDetail(JSON.parse(JSON.stringify(row.villageName)), 5)">{{row.villageName}}</td>
              <td align="center" class="type" style="width: 90rpx">
                <span @click="toJumpPage(JSON.stringify(row), 'warning')"
                  :style="{'color': row.policeCnt !== null ? '#3C8AFF': '#333'}">{{ row.policeCnt !== null ? row.policeCnt: '/' }}</span>
              </td>
              <td align="center" class="type" style="width: 90rpx">
                <span @click="toJumpPage(JSON.stringify(row), 'omAllPage')"
                  :style="{'color': row.total !== null ? '#3C8AFF': '#333'}">{{ row.total !== null ? row.total: '/' }}</span>
              </td>
              <td align="center" style="width: 84rpx" class="type">{{ row.isHandle !== null ? row.isHandle: '/' }}
              </td>
              <td align="center" style="width: 84rpx" class="type">{{row.unHandle !== null ? row.unHandle: '/' }}
              </td>
              <td align="center" style="width: 120rpx" class="type">{{ row.outTime !== null ? row.outTime: '/' }}
              </td>
              <td align="center" class="type"
                :style="{'color': String(row.enterprise).length > 4 ? '#3C8AFF': '#4a4a4a'}" style="width: 98rpx"
                @click="openDetail(JSON.parse(JSON.stringify(row.enterprise)), 4)">{{row.enterprise}}</td>
            </tr>
          </tbody>
        </table>
      </view>
      <view class="yunweiContent">
        <view class="titleContent">
          <span class="titleIcon"></span>
          运维态势
        </view>
        <view class="operationSituation">
          <!-- 日期 -->
          <view class="operationByDate" @click="openCalendar('dateShow1')">
            <u-input v-model="dateRange2" placeholder="请选择日期" disabled placeholderStyle="color:#989898"
              disabledColor="#fff">
              <!-- suffixIcon="calendar"
                suffixIconStyle="color: rgba(142, 142, 142, 1);font-size: 28rpx" -->
              <span slot="suffix">
                <!-- <image v-if="clearsDateShow1" src="../../static/login/clear.png" class="clearImg"
                    @click.stop="onClearsDate('dateShow1')"></image> -->
                <image src="../../static/manage/calendarImg.png" class="calendarImg"></image>
              </span>
            </u-input>
          </view>
          <view class="operationStatisticContent">
            <view class="operationStatisticItem">
              <view class="value">{{operationData.total}}次</view>
              <view>
                <image src="../../static/manage/operationIcon1.png" class="icon"></image>
                <span class="label">运维总数</span>
              </view>
            </view>
            <view class="operationStatisticItem" @click="openOperatorDialog">
              <view class="value" style="color: #74CDAF;">{{operationData.operatorNum}}人</view>
              <view>
                <image src="../../static/manage/operationIcon2.png" class="icon"></image>
                <span class="label" style="color: #3C8AFF;">运维出勤人数</span>
              </view>
            </view>
            <view class="operationStatisticItem">
              <view class="value">{{operationData.operated}}个</view>
              <view>
                <image src="../../static/manage/operationIcon1.png" class="icon"></image>
                <span class="label">已运维村庄数量</span>
              </view>
            </view>
          </view>
          <view class="tableContent">
            <table stripe emptyText="暂无更多数据" class="tableClass">
              <!-- 表头行 -->
              <thead>
                <tr class="headTr" style="height: 42rpx;background: #fff;margin-bottom: 6rpx">
                  <th align="center" style="width: 148rpx">村庄名称</th>
                  <th align="center" style="width: 118rpx">运维次数</th>
                  <th align="center" style="width: 234rpx">最近一次运维时间</th>
                  <th align="center" style="width: 184rpx">最近运维人员</th>
                </tr>
              </thead>
              <!-- 表格数据行 -->
              <tbody class="tableBody">
                <tr v-for="(row,index) in dtotableList" :key="row.id" class="contentClass">
                  <!-- @click="openDetail(JSON.parse(JSON.stringify(row.villageName)), 5)" -->
                  <!-- :style="{'color': String(row.villageName).length > 5 ? '#3C8AFF': '#4a4a4a'}" -->
                  <td align="center" class="type" style="width: 148rpx">
                    {{row.villageName}}</td>
                  <td align="center" class="type" style="width: 118rpx">{{ row.times !== null ? row.times: '/' }}
                  </td>
                  <td align="center" style="width: 234rpx" class="type">
                    {{ row.lastTime !== null ? row.lastTime: '/' }}
                  </td>
                  <td align="center" style="width: 184rpx" class="type">{{row.handler !== null ? row.handler: '/' }}
                  </td>
                </tr>
                <van-empty v-if="!dtotableList.length" description="暂无数据" />
              </tbody>
            </table>
          </view>
          <view class="operationItem1">
            <image src="../../static/manage/operationIcon3.png" class="icon"></image>
            <span class="label">未运维村庄数量</span>
            <span class="value">{{operationData.needOperate}}个</span>
          </view>
          <view class="tableContent">
            <table stripe emptyText="暂无更多数据" class="tableClass">
              <!-- 表头行 -->
              <thead>
                <tr class="headTr" style="height: 42rpx;background: #fff;margin-bottom: 6rpx">
                  <th align="center" style="width: 100%">村庄名称</th>
                </tr>
              </thead>
              <!-- 表格数据行 -->
              <tbody class="tableBody">
                <tr v-for="(row,index) in needOperateList" :key="row.id" class="contentClass">
                  <!-- :style="{'color': String(row.villageName).length > 5 ? '#3C8AFF': '#4a4a4a'}"  -->
                  <!-- @click="openDetail(JSON.parse(JSON.stringify(row.villageName)), 5)" -->
                  <td align="center" class="type" style="width: 100%">
                    {{row.villageName}}</td>
                </tr>
                <van-empty v-if="!needOperateList.length" description="暂无数据" />

              </tbody>
            </table>
          </view>
        </view>
      </view>
      <!-- 企业运维响应效率排名 -->
      <!-- <view class="statisticContent">
          <h2 class="card-title" style="color: #4A4A4A;">企业运维响应效率排名</h2>
          <view class="rankingContent">
            <view v-for="(rank, index) in rankingList" :key="index" class="rankingItem"
              :style="{'background': backgroundList[index].background}">
              <view class="numContent" :style="{'backgroundColor': backgroundList[index].color}">{{ index + 1 }}</view>
              <view class="company-content">
                <view :style="{'border': `2rpx solid ${backgroundList[index].borderColor}`}" class="avatarBorder">
                  <image :src="`/static/manage/${backgroundList[index].headPic}.png`" class="headPic"></image>
                  <image class="defaultAvatar" src="@/static/manage/defaultCompanyAvatar.png"></image>
                </view>
                <view class="companyName">{{rank.enterpriseName}}</view>
                <view class="time" :style="{'color': backgroundList[index].color}">平均响应时间 {{ rank.responseTime ? rank.responseTime + 'h' : '--'}}
                </view>
              </view>
            </view>
          </view>

        </view> -->
      <!-- 运维记录按钮 -->
      <view class="footer">
        <span @click="toYunweiRecord">运维记录</span>
      </view>
    </view>

    <device-break-table :areaId="regionId" :show="overflowShow"></device-break-table>
    <jie-bo-jing-table :areaId="regionId" :show="jiebojingTableShow"></jie-bo-jing-table>
    <na-chang-village-table :areaId="regionId" :show="nachangcunShow"></na-chang-village-table>
    <yun-wei-people-table :areaId="regionId" :show="yunweiPeopleShow" :query="checkOperator"></yun-wei-people-table>
    <view style="height: 600px">
      <van-calendar color="rgba(39, 105, 247, 1)" :show="dateShow" ref="calendar" :maxDate="maxDate" :minDate="minDate"
        monthNum="24" rowHeight="55" :defaultDate="defaultDate1" title="选择时间" type="range" @confirm="dateConfirm"
        @close="dateClose('dateShow')">
      </van-calendar>
      <van-calendar color="rgba(39, 105, 247, 1)" :show="dateShow1" ref="calendar1" :maxDate="maxDate"
        :minDate="minDate" monthNum="24" rowHeight="55" :defaultDate="defaultDate2" title="选择时间" type="range"
        @confirm="dateConfirm1" @close="dateClose('dateShow1')">
      </van-calendar>
    </view>
  </view>
</template>

<script>
import { getAreaTreeList } from '@/api/area'
import { getNodePath } from '@/utils/treeOperate'
import {
  getYunweiAreaStatistics,
  getResponseTimeRank,
  getYunweiStatistic,
  getVillageYunweiStatistic,
  getOperationMaintenanceSituation
} from '@/api/manage'
import deviceBreakTable from './modules/deviceBreakTable.vue'
import jieBoJingTable from './modules/jieBoJingTable.vue'
import naChangVillageTable from './modules/naChangVillageTable.vue'
import yunWeiPeopleTable from './modules/yunWeiPeopleTable.vue'
import UIcon from '../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
export default {
  components: {
    deviceBreakTable,
    jieBoJingTable,
    naChangVillageTable,
    yunWeiPeopleTable,
    UIcon
  },
  data() {
    return {
      checkOperator: {
        // begin: '',
        // end: '',
        // operatorNames: []
      },
      needOperateList: [],
      operationData: {},
      defaultDate2: [],
      dtotableList: [],
      defaultDate1: [],
      jiebojingTableShow: false,
      nachangcunShow: false,
      yunweiPeopleShow: false,
      isDate1: null,
      dateRange1: '',
      dateRange2: '',
      maxDate: new Date().valueOf(),
      minDate: new Date('2024-01-01').getTime(),
      dateShow: false,
      searchVillage: "",
      overflowShow: false,
      areaName: '',
      regionIdCopy: '',
      getNodePath,
      regionId: '',
      dataTree: [],
      formData: {
        village: '123',
        terminal: '123',
        device: '123',
        break: '123',
        total: '123',
        outTime: '123',
        process: '4',
      },
      OmtableList: [
      ],
      formData1: {},
      contentList: [
        // { label: '村庄数量', picName: 'village', prop: 'villageCount', style: { width: '61rpx', height: '54rpx' } },
        { label: '接驳井', picName: 'jiebojing', prop: 'connectWellCount', style: { width: '61rpx', height: '54rpx' } },
        { label: '终端总数', picName: 'terminal', prop: 'terminalCount', style: { width: '55rpx', height: '55rpx' }, path: '/subpack_Manage_Terminal/terminal/index' },
        { label: '设备总数', picName: 'device', prop: 'equipmentCount', style: { width: '50rpx', height: '50rpx' }, path: '/subpack_Manage_Device/device/index' },
        { label: '运行异常', picName: 'break', prop: 'runtimeExceptionCount', style: { width: '58rpx', height: '51rpx' } },
        // { label: '运维总数', picName: 'total', prop: 'omCount', style: { width: '53rpx', height: '52rpx' } },
        // { label: '超时未处理', picName: 'outTime', prop: 'noHandleCount', style: { width: '58rpx', height: '61rpx' } },
        // { label: '平均响应效率', picName: 'process', prop: 'responseTime', style: { width: '56rpx', height: '60rpx' } },
      ],
      contentList1: [
        { label: '运维工单', picName: 'omBg', prop: 'total', style: { width: '61rpx', height: '54rpx' }, path: '/subpack_Manage/yunweiRecord/index' },
        { label: '已处理', picName: 'handleBg', prop: 'handle', style: { width: '61rpx', height: '54rpx' }, statusValue: '2', path: '/subpack_Manage/yunweiRecord/index' },
        { label: '未处理', picName: 'unHandle', prop: 'unHandle', style: { width: '61rpx', height: '54rpx' }, statusValue: '1', path: '/subpack_Manage/yunweiRecord/index' },
        { label: '超时未处理', picName: 'outTimeHandle', prop: 'timeOut', style: { width: '61rpx', height: '54rpx' }, statusValue: '3', path: '/subpack_Manage/yunweiRecord/index' },

      ],
      rankingList: [
        { avatar: '', company: 'xx运维公司' },
        { avatar: '', company: 'xx运维公司' },
        { avatar: '', company: 'xx运维公司' },
      ],
      backgroundList: [
        { headPic: 'first', color: '#FFC400', borderColor: '#FFC407', background: 'linear-gradient( 180deg, #FFEED6 0%, #FFFEFE 100%)' },
        { headPic: 'second', color: '#3C8AFF', borderColor: '#3C8AFF', background: 'linear-gradient( 180deg, #DAE9FF 0%, #FFFEFE 100%)' },
        { headPic: 'third', color: '#A4B6D3', borderColor: '#A4B6D3', background: 'linear-gradient( 180deg, #E8ECF8 0%, #FFFEFE 100%)' }
      ],
      startTime: '',
      endTime: '',
      startTime1: '',
      endTime1: '',
      clearsDateShow: false,
      clearsDateShow1: false,
      dateShow1: false
    }
  },
  async created() {
    this.getAreaTree()
  },
  async onLoad(query) {
    const { regionId, areaName } = JSON.parse(query.formData)
    console.log(query, regionId, 'query')
    this.regionId = regionId || uni.getStorageSync('regionId')
    const res = this.getLastWeekRange()
    const { start, end } = res
    this.dateConfirm({ detail: [start, end] })
    this.dateConfirm1({ detail: [start, end] })
    // console.log(res, 'res------------------时间！！！')

    this.getYunweiAreaStatistics()
    this.getYunweiStatistic()
    this.getVillageYunweiStatistic()
    this.getOperationMaintenanceSituation()
    // this.getResponseTimeRank()
    uni.$on('hideDeviceDialog', () => {
      console.log('关闭弹框')
      this.overflowShow = false
      this.jiebojingTableShow = false
      this.nachangcunShow = false
      this.yunweiPeopleShow = false
    })
    this.$nextTick(() => {
      setTimeout(async () => {
        this.areaName = await this.getAddressName(this.regionId)
        console.log(this.areaName, '区域名称')
      }, 500)
    })
  },
  methods: {
    openOperatorDialog() {
      this.checkOperator = {
        begin: this.startTime1,
        end: this.endTime1,
        operatorNames: this.operationData.names
        // operatorNames: encodeURIComponent(this.operationData.names)
      }
      this.yunweiPeopleShow = true
    },
    // 获取近一周的起止时间（包含今天）
    getLastWeekRange() {
      const end = new Date(); // 今天
      const start = new Date();
      start.setDate(end.getDate() - 6); // 7天前（包含今天）

      return {
        start: this.formatDate(start),
        end: this.formatDate(end),
        startDate: start,
        endDate: end
      };
    },
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getOperationMaintenanceSituation() {
      getOperationMaintenanceSituation({ areaId: this.regionId, begin: this.startTime1, end: this.endTime1 }).then(res => {
        this.dtotableList = res.data.result ? res.data.result.dtoList.filter(item => item.status === 2) : []
        this.needOperateList = res.data.result ? res.data.result.dtoList.filter(item => item.status === 1) : []
        this.operationData = {
          operatorNum: res.data.result.operatorNum,
          total: res.data.result.total,
          operated: res.data.result.dtoList.filter(item => item.status === 2).length,
          needOperate: res.data.result.dtoList.filter(item => item.status === 1).length,
          names: res.data.result.names
        }
        console.log(res, this.operationData, 'res--运维态势')
      })
    },
    searchVillageChange(value) {
      console.log(value, this.searchVillage, '村庄搜索')
      this.getVillageYunweiStatistic()
    },
    toJumpPage(row, pageName) {
      // console.log(row, JSON.parse(row).area, pageName, 'row')
      if (pageName === 'omAllPage') this.$tab.navigateTo(`/subpack_Manage/yunweiRecord/index?areaId=${JSON.parse(row).area}&pageTitle=工单总数&startTime=${this.startTime}&endTime=${this.endTime}`)
      if (pageName === 'warning') this.$tab.navigateTo(`/subpack_Manage/yunweiWarning/index?areaId=${JSON.parse(row).area}&startTime=${this.startTime}&endTime=${this.endTime}`)
    },

    openCalendar(showName) {
      console.log('点击唤起日历')
      this[showName] = true
    },
    dateConfirm(e) {
      this.startTime = new Date(e.detail[0]).format('yyyy-MM-dd')
      this.endTime = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd')
      this.defaultDate1 = [this.startTime, this.endTime]

      this.dateRange1 = this.startTime + '~' + this.endTime
      this.getVillageYunweiStatistic()
      // this.timeStr = this.startTime + '~' + this.endTime
      this.clearsDateShow = true
      this.dateShow = false
      // this.getAllManageOmList(this.regionId)
    },
    dateConfirm1(e) {
      console.log(e, 'e')
      this.startTime1 = new Date(e.detail[0]).format('yyyy-MM-dd')
      this.endTime1 = new Date(e.detail[e.detail.length - 1]).format('yyyy-MM-dd')
      this.defaultDate2 = [this.startTime1, this.endTime1]
      this.dateRange2 = this.startTime1 + '~' + this.endTime1
      this.getOperationMaintenanceSituation()
      // this.timeStr = this.startTime + '~' + this.endTime
      this.clearsDateShow1 = true
      this.dateShow1 = false
      // this.getAllManageOmList(this.regionId)
    },
    dateClose(showName) {
      this[showName] = false
    },
    onClearsDate(showName) {
      if (showName === 'dateShow') {
        this.defaultDate1 = []
        this.startTime = ''
        this.endTime = ''
        this.clearsDateShow = false
        this.dateRange1 = ''
        this.getVillageYunweiStatistic()
      } else {
        this.defaultDate2 = []
        this.startTime1 = ''
        this.endTime1 = ''
        this.clearsDateShow1 = false
        this.dateRange2 = ''
        this.getOperationMaintenanceSituation()
      }
      // this.$refs.calendar.clear()
    },
    // 点击展示全部
    openDetail(row, num) {
      console.log(row, num)
      if (String(row).length > num) {
        uni.showModal({
          content: row,
          duration: 2000,
          showCancel: false,
          confirmText: '关闭'
        });
      }
    },
    // 查询是否超出表格列宽度
    //使用延时执行待页面完全渲染再执行
    // getIsOverflow(idName) {
    //   setTimeout(() => {
    // 			uni.getSystemInfo({
    // 			  success(res) { 
    // 			    let obj = uni.createSelectorQuery().select(idName)
    // 			    obj.boundingClientRect(function (data) { 
    // 			      console.log('元素信息：',data)
    // 			    }).exec()
    // 			  }
    // 			})
    // 	}, 500)
    // },
    // 获取村庄关联运维任务统计
    getVillageYunweiStatistic() {
      getVillageYunweiStatistic({ areaId: this.regionId, villageName: this.searchVillage, commitTimeSt: this.startTime, commitTimeEd: this.endTime }).then(({ data }) => {
        console.log(data, 'data--村庄关联运维统计')
        this.OmtableList = data
      })
    },
    // 获取运维统计
    getYunweiStatistic() {
      getYunweiStatistic({ areaId: this.regionId }).then(({ data }) => {
        console.log(data, 'data--获取运维统计')
        this.formData1 = data.result
      })
    },
    onchange() {
      console.log('change--data-picker')
    },

    getAddressName(regionId) {
      console.log(this.dataTree, ' this.dataTree')
      // const i = getNodePath({ id: regionId }, this.dataTree).length - 1
      return getNodePath({ id: regionId }, this.dataTree).join('/')
    },
    nodeClick(e) {
      console.log('节点被点击', e)
      const { id, departName } = e
      this.regionIdCopy = id
      this.areaName = this.getAddressName(id)
    },
    popupclosed() {
      console.log('弹窗关闭')
      if (this.regionIdCopy) {
        this.regionId = this.regionIdCopy
        this.getYunweiAreaStatistics()
        this.getYunweiStatistic()
        this.getVillageYunweiStatistic()
        // this.getResponseTimeRank()
      }
    },
    // 企业响应时间排行
    // getResponseTimeRank() {
    //   getResponseTimeRank({ areaId: this.regionId }).then(({ data }) => {
    //     this.rankingList = data.data
    //     console.log(data, 'data--企业响应时间排行')
    //   })
    // },
    // 运维统计
    getYunweiAreaStatistics() {
      getYunweiAreaStatistics({ areaId: this.regionId }).then(({ data }) => {
        console.log(data, 'data--获取运维统计数据')
        this.formData = data.data
      })
    },
    toYunweiRecord() {
      this.$tab.navigateTo(`/subpack_Manage/yunweiRecord/index?areaId=${this.regionId}`)
    },
    goToBack() {
      console.log('测试')
      uni.navigateBack()
    },
    /** 获取区域树 */
    async getAreaTree() {
      const res = await getAreaTreeList()
      this.dataTree = res.data.data
      console.log(this.dataTree, 'tree--获取到选择区域树')
    },
    toItemDetail(item) {
      console.log('跳转', item, this.regionId, item.path)
      if (item.label === '接驳井') {
        this.jiebojingTableShow = true
      } else {
        if (item.path) {
          const path = item.statusValue ? item.path + '?areaId=' + this.regionId + '&status=' + item.statusValue + '&statusName=' + ['未处理', '已处理', '超时未处理'][Number(item.statusValue) - 1]
            : item.path + '?areaId=' + this.regionId
          this.$tab.navigateTo(path)
        } else {
          if (item.label === '运行异常') {
            this.overflowShow = true
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .van-empty__image {
  width: 160rpx;
  height: 160rpx;
}
::v-deep .van-empty__description {
  font-size: 22rpx;
}
.page {
  position: relative;
  // --calendar-height: 67%;
  --calendar-popup-height: 67%;
  .top-bg {
    width: 100%;
    height: 330rpx;
    background: #2769f7;
    border-radius: 0rpx 0rpx 140rpx 140rpx;
    padding-top: 104rpx;
    text-align: center;
    font-weight: 600;
    font-size: 40rpx;
    color: #ffffff;
    letter-spacing: 4rpx;
    .return {
      position: absolute;
      left: 32rpx;
      margin-top: 8rpx;
    }
  }
  .content {
    position: absolute;
    padding: 32rpx;
    width: calc(100% - 64rpx);
    height: calc(100vh - 202rpx);
    overflow: auto;
    top: 170rpx;
    .dataPicker {
      width: 100%;
      ::v-deep .input-value {
        height: 88rpx;
        background: #fff;
        padding-left: 24rpx;
      }
      ::v-deep .uni-data-tree-dialog {
        color: #4a4a4a;
      }
      ::v-deep .u-icon__icon {
        font-size: 16rpx !important;
      }
    }
    .dataPickerInput {
      width: calc(100% - 48rpx);
      height: 88rpx;
      background: #fff;
      color: #4a4a4a;
      padding-left: 24rpx;
      padding-right: 24rpx;
      text-align: left;
      line-height: 88rpx;
      border-radius: 10rpx;
      display: flex;
      justify-content: space-between;
      .address-icon {
        width: 15rpx;
        height: 20rpx;
        margin-right: 16rpx;
      }
    }
    .footer {
      text-align: center;
      margin-top: 32rpx;
      span {
        display: inline-block;
        font-weight: 400;
        font-size: 24rpx;
        color: #3c8aff;
        line-height: 34rpx;
      }
    }
    .searchContent {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      height: 70rpx;
      .searchDate {
        width: calc(100% - 323rpx);
        height: 50rpx;
        border-radius: 9rpx;
        background: #fff;
        position: relative;
        .clearImg {
          position: absolute;
          width: 25rpx;
          height: 25rpx;
          right: 38rpx;
          top: 50%;
          transform: translate(0, -50%);
          z-index: 1;
        }
        .calendarImg {
          position: absolute;
          width: 17rpx;
          height: 17rpx;
          right: 8rpx;
          top: 50%;
          transform: translate(0, -50%);
        }
        ::v-deep .u-input {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
        ::v-deep .u-input__content__field-wrapper__field {
          z-index: 0;
          height: 50rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx !important;
          // color: #989898 !important;
          letter-spacing: 0;
          color: #333;
          padding-right: 60rpx;
        }
      }
      .searchVillage {
        width: 313rpx;
        height: 50rpx;
        margin-right: 10rpx;
        ::v-deep .uni-searchbar {
          padding: 0;
          height: 50rpx;
          .uni-searchbar__box-search-input,
          .uni-searchbar__text-placeholder {
            font-size: 22rpx !important;
          }
          .uni-searchbar__text-placeholder {
            color: #989898 !important;
          }
          .uni-searchbar__box {
            height: 50rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx !important;
            color: #989898;
            letter-spacing: 0;
            justify-content: start;
          }
          .uni-searchbar__box-search-input {
            text-align: left;
          }
        }
      }
    }
    .tableContent {
      // margin-top: 48rpx;
      .tableClass {
        width: 100%;
        thead {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
        .headTr {
          font-weight: bold;
          font-size: 22rpx;
          color: #4a4a4a;
          height: 80rpx;
          letter-spacing: 0;
          text-align: center;
        }
        .tableBody {
          // width: 100%;
          display: block;
          max-height: 320rpx;
          overflow-y: auto;
        }
        tr {
          display: flex;
          width: 100%;
          table-layout: fixed;
          align-items: center;
        }
        thead th {
          // background: #f5f5f5;
          position: sticky;
          top: 0;
        }
        .contentClass {
          height: 80rpx;

          .No {
            font-size: 20rpx;
            color: #3c8aff;
            text-decoration-line: underline;
          }
          .type {
            font-weight: 800;
            font-size: 22rpx;
            color: #4a4a4a;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            letter-spacing: 0;
            text-align: center;
          }
          .sum {
            font-weight: 800;
            font-size: 24rpx;
            color: #989898;
          }
          .date {
            font-weight: 800;
            font-size: 20rpx;
            color: #989898;
          }
          .omUnit {
            font-weight: 800;
            font-size: 22rpx;
            color: #989898;
          }
          .status {
            font-weight: 800;
            font-size: 22rpx;
          }
          .success {
            color: #74cdaf;
            white-space: nowrap;
          }
          .warning {
            color: #fbd333;
            white-space: nowrap;
          }
        }
        .contentClass:nth-child(2n) {
          background: #fff;
        }
        .contentClass:nth-child(2n + 1) {
          background: #eff6fc;
        }
      }
    }
    .statisticContent {
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      border-radius: 10rpx;
      padding: 12rpx;
      margin-top: 16rpx;
      .statisticVillage {
        width: calc(100% - 10rpx) !important;
        height: 109rpx;
        display: flex;
        justify-content: space-around;
        background-size: 100% 100%;
        padding-left: 60rpx;
      }
      .statisticItem {
        margin-right: 10rpx;
        width: calc(50% - 10rpx);
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 28rpx;
        color: #8e8e8e;
        line-height: 40rpx;
        padding-bottom: 10rpx;
        padding-top: 6rpx;
        .icon {
          margin: 0 24rpx;
        }
        .main-value {
          font-weight: 800;
          font-size: 36rpx;
          color: #4a4a4a;
          line-height: 50rpx;
          text-align: left;
          .unit {
            font-size: 24rpx;
          }
        }
        .label {
          margin-top: 12rpx;
        }
      }

      .card-title {
        color: #4a4a4a;
        font-weight: 800;
        font-size: 28rpx;
      }

      .rankingContent {
        display: flex;
        width: 100%;
        .rankingItem {
          width: calc(33% - 20rpx);
          // height: 254rpx;
          margin: 10rpx;
          position: relative;
          .numContent {
            position: absolute;
            left: 0;
            top: 0;
            width: 40rpx;
            height: 40rpx;
            text-align: center;
            border-radius: 6rpx 0rpx 6rpx 0rpx;
            font-size: 26rpx;
          }
          .avatarBorder {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;
            margin-top: 36rpx;
            top: 16rpx;
            .headPic {
              width: 30rpx;
              height: 26rpx;
              position: absolute;
              top: -20rpx;
              left: 50%;
              transform: translate(-50%, 0);
            }
            .defaultAvatar {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              background: #fff;
            }
          }
          .company-content {
            display: grid;
            grid-template-rows: auto 1fr auto;
            height: 100%;
          }
          .companyName {
            font-weight: bold;
            font-size: 24rpx;
            color: #4a4a4a;
            line-height: 34rpx;
            margin-top: 40rpx;
          }
          .time {
            font-weight: bold;
            font-size: 20rpx;
            margin-top: 28rpx;
          }
        }
      }
    }
    .yunweiContent {
      .operationSituation {
        .operationByDate {
          position: relative;
          .clearImg {
            position: absolute;
            width: 25rpx;
            height: 25rpx;
            right: 38rpx;
            top: 50%;
            transform: translate(0, -50%);
            z-index: 8;
          }
          .calendarImg {
            position: absolute;
            width: 17rpx;
            height: 17rpx;
            right: 8rpx;
            top: 50%;
            transform: translate(0, -50%);
          }
        }
        ::v-deep .u-input {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
        ::v-deep .u-input__content__field-wrapper__field {
          z-index: 0;
          height: 50rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx !important;
          // color: #989898 !important;
          color: #333;
          letter-spacing: 0;
        }
        .operationStatisticContent {
          display: flex;
          justify-content: space-between;
          margin-top: 20rpx;
          margin-bottom: 20rpx;
          .operationStatisticItem {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            letter-spacing: 0;
            text-align: center;
            .value {
              font-size: 25rpx;
              color: #3e6edd;
              line-height: 36rpx;
            }
            .icon {
              width: 33rpx;
              height: 33rpx;
              vertical-align: middle;
              margin-right: 9rpx;
            }
            .label {
              display: inline-block;
              font-size: 22rpx;
              color: #4a4a4a;
              line-height: 31rpx;
            }
          }
        }
        .operationItem1 {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          letter-spacing: 0;
          text-align: left;
          margin-bottom: 20rpx;
          .value {
            display: inline-block;
            font-size: 25rpx;
            color: #ffc400;
            line-height: 36rpx;
            margin-left: 12rpx;
          }
          .icon {
            width: 33rpx;
            height: 33rpx;
            vertical-align: middle;
            margin-right: 9rpx;
          }
          .label {
            display: inline-block;
            font-size: 22rpx;
            color: #4a4a4a;
            line-height: 31rpx;
          }
        }
      }
      .titleContent {
        font-family: PingFang SC, PingFang SC;
        font-weight: 800;
        font-size: 25rpx;
        color: #4a4a4a;
        line-height: 36rpx;
        text-align: left;
        margin-top: 30rpx;
        margin-bottom: 18rpx;
        .titleIcon {
          display: inline-block;
          width: 7rpx;
          height: 18rpx;
          background: #2769f7;
          border-radius: 5rpx 5rpx 5rpx 5rpx;
          opacity: 0.6;
          margin-right: 9rpx;
        }
      }
    }
  }
}
</style>